<template>
  <div>
    <transition name="modal" tag="div">
      <div class="modal" v-show="show" transition="fade">
        <div class="share-content">
          <div class="icon-list">
            <div class="icon-item" @click="showErweima('showCode')">
              <img src="/static/img/ic_erweima@2x.png">
              <span>二维码</span>
            </div>
            <div v-if="isIOS" class="icon-item" @click="showGuide">
              <img src="/static/img/ic_qq@2x.png">
              <span>QQ</span>
            </div>
            <div v-if="isIOS" class="icon-item" @click="showGuide">
              <img src="/static/img/ic_chat@2x.png">
              <span>微信</span>
            </div>
            <div v-if="isIOS" class="icon-item" @click="showGuide">
              <img src="/static/img/ic_pyq@2x.png">
              <span>朋友圈</span>
            </div>
          </div>
          <div class="cancel-btn" @click="cancelClick('close')">
            取消
          </div>
        </div>
      </div>

    </transition>
    <guide ref="guide"></guide>
  </div>

</template>

<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  input:disabled
    background-color :transparent
  .nowrap
    white-space :nowrap
  .modal-enter-active
    animation: modal-in .15s linear
  .modal-leave-active
    animation: modal-in .15s reverse linear
  @keyframes modal-in
    0%
      transform: translateY(-20px) rotateX(-35deg)
      opacity :0
    50%
      opacity :0.5
    100%
      transform: translateY(0) rotateX(0)
      opacity :1
  .modal
    width: 100%
    height: 100%
    position: fixed
    left: 0
    top: 0
    right: 0
    bottom: 0
    z-index: 1001
    outline: 0
    overflow: hidden
    background: rgba(0,0,0,.4)
    .share-content
      position absolute
      bottom 0
      background $bgColor
      display flex
      width 100%
      flex-direction column
      .icon-list
        display flex
        .icon-item
          width 1.08rem
          text-align center
          margin .5rem 0 .5rem .46rem
          img
            height 1.08rem
            margin-bottom .2rem
      .cancel-btn
        background white
        height 1rem
        line-height 1rem
        text-align center
        color $darkTextColor
        font-size .32rem
</style>

<script>
  import Guide from '@/components/guide.vue'
export default {
  name: 'shared',
  data () {
    return {
      show: false,
      isIOS:true
    }
  },
  components:{
    Guide
  },
  methods: {
    showGuide(){
        this.show=false;
        this.$refs.guide.show=true
    },
    confirm () {
      this.show = true
      this.promise = new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
      return this.promise
    },
    cancelClick(type){
      this.show = false
      this.resolve(type)
    },
    showErweima(type){
      this.show = false
      this.resolve(type)
    }
  },
  created(){
    this.isIOS = /(iphone|ipad|ipod|ios)/i.test(navigator.userAgent.toLowerCase())
  }
}
</script>
